<template>
    <div id='page1'>
        <el-steps :active="active" finish-status="success">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
        </el-steps>

        <el-card class="box-card" v-show="active==1">
            <div slot="header" class="clearfix">
                <span>填写内容</span>
            </div>
            <div>
                <mavonEditor ref='md' v-model="value" @imgDel="$imgDel" @imgAdd="$imgAdd" :toolbars="toolbar" @htmlcode="gethtmlcode" />
            </div>
        </el-card>

        <el-card class="box-card" v-show="active==2">
            <div slot="header" class="clearfix">
                <span>添加密码</span>
            </div>
            <div>
                <el-input v-model="passworld" placeholder="请输入密码"></el-input>
            </div>
        </el-card>

        <el-card class="box-card" v-show="active==3">
            <div slot="header" class="clearfix">
                <span>发布二维码</span>
            </div>
            <div>
                <div style="width:512px;height:512px" id="qrcode"></div>
            </div>
        </el-card>

        <!-- <el-button style="margin-top: 12px;" v-show="active!=1" @click="up">上一步</el-button> -->
        <el-button :loading='editLoading' style="margin-top: 12px;" @click="next">{{btntxt}}</el-button>
    </div>
</template>
<script>
import { mavonEditor } from "mavon-editor";
import NProgress from "nprogress";
import QRCode from "qrcodejs2";
import axios from "axios";
import UUID from "node-uuid";
import zlib from "zlib";
import qs from "qs";
//import COS from 'cos-nodejs-sdk-v5'
//import config from '../../../config/config.js'
export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      editLoading: false,
      passworld: "",
      btntxt: "下一步",
      active: 1,
      value: "",
      toolbar: {
        bold: true, // 粗体
        underline: true, // 下划线
        ol: true, // 有序列表
        table: true, // 表格
        imagelink: true, // 图片链接
        undo: true, // 上一步
        redo: true, // 下一步
        htmlcode: true // 展示html源码
      },
      imgsrc: "",
      htmlcode: "",
      isupdate: false,
      thisgetid: ""
    };
  },
  created() {
    let id = this.$route.query.id;
    if (!id) return;
    var that = this;
    axios.get("/api/getqrcode?id=" + id).then(function(res) {
      that.value = res.data.data[0].html;
    });
    this.isupdate = true;
    this.thisgetid = id;
    console.log(this.thisgetid);
  },
  methods: {
    $imgDel(pos) {
      console.log(pos);
      delete this.value[pos];
    },
    $imgAdd(pos, $file) {
      NProgress.start();
      this.editLoading = true;
      var formdata = new FormData();
      formdata.append("file", $file);
      axios({
        url: "/api/uploadfile",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" }
      }).then(url => {
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        // $vm.$img2Url 详情见本页末尾
        console.log(url.data.data);
        if (url.data.msg.errno === -2) {
          this.$message({
            message: "提交失败",
            type: "error"
          });
          this.$imgDel(pos);
        } else {
          //this.mavonEditor.$img2Url(pos, url.data.data);
          this.$refs.md.$img2Url(pos, "http://" + url.data.data);
        }
        NProgress.done();
        this.editLoading = false;
      });
    },
    next() {
      if (this.active++ > 2) {
        this.active = 1;
        this.$router.push({ path: "/page2" });
      }
    },
    up() {
      this.active--;
    },
    gethtmlcode(s, v) {
      this.htmlcode = v;
    }
  },
  watch: {
    active(cur, old) {
      this.btntxt = cur == 3 ? "发布" : "下一步";
      if (cur == 3) {
        //生成二维码
        var qrcode = new QRCode("qrcode", {
          width: 256,
          height: 256,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
        qrcode.clear();

        this.htmlcode = mavonEditor.mixins[0]
          .data()
          .markdownIt.render(this.value);

        //this.htmlcode = this.$refs.md.render(this.value);

        var savedata = {
          html: this.htmlcode,
          pwd: this.passworld,
          getid: this.isupdate ? this.thisgetid : UUID.v1()
        };

        var path = `http://120.27.139.133:3389/api/qrcode?id=${savedata.getid}`;
        var data = { data: JSON.stringify(savedata) };
        let _this = this;

        let url = _this.thisgetid
          ? `/api/qrcode/${_this.thisgetid}`
          : "/api/qrcode";

        NProgress.start();
        axios.post(url, data).then(function(res) {
          if (res.data.success) {
            _this.$message({
              message: "提交成功",
              type: "success"
            });
            qrcode.makeCode(path);
          } else {
            _this.$message({
              message: "提交失败",
              type: "error"
            });
          }
          NProgress.done();
        });
      }
    }
  }
};
</script>
<style scoped>
.page1 {
  width: 100%;
  height: 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 80%;
}
</style>